<script setup lang="ts">
import { ref, onMounted } from "vue";
import { DetailFormProps } from "./inventory/utils/types";

const props = withDefaults(defineProps<DetailFormProps>(), {
  formInline: () => ({
    idList: [],
    collapseList: [],
    storeOptions: []
  })
});

const newFormInline = ref(props.formInline);
</script>

<template>
  <div class="detail-box">
    <el-collapse v-model="newFormInline.collapseList" class="dcollapse">
      <el-collapse-item
        v-for="item in newFormInline.storeOptions"
        :key="item.id"
        :title="item.storeName"
        :name="item.id"
      >
        <div class="pl-[20px]">
          <el-checkbox-group v-model="newFormInline.idList" class="d-checkbox">
            <el-checkbox
              v-for="items in item.children"
              :key="items.id"
              :label="items.storeName"
              :value="items.id"
              disabled
            />
          </el-checkbox-group>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<style lang="scss" scoped>
.detail-box {
  min-height: 380px;
  padding: 0 20px;
}
.dcollapse {
  border-top: none;
}
:deep(.d-checkbox .el-collapse-item__content) {
  padding-bottom: 15px;
}
:deep(
    .d-checkbox .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner
  ) {
  background-color: var(--el-checkbox-checked-bg-color);
  border-color: var(--el-checkbox-checked-input-border-color);
}
:deep(.d-checkbox .el-checkbox__input.is-checked .el-checkbox__inner:after) {
  border-color: var(--el-checkbox-checked-icon-color);
}
</style>
